<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <el-row :gutter="20"><!-- gutter是指定每个分栏的间隔 -->
<!--                &lt;!&ndash; 分栏一共占24格，给搜索框7格，添加按钮4格 &ndash;&gt;-->
<!--                <el-col :span="7">-->
<!--                    &lt;!&ndash; 搜索与添加区域 &ndash;&gt;-->
<!--                    <div style="display: flex; align-items: center;">-->
<!--                      <el-input placeholder="请输入内容" clearable @clear="getUsers()" v-model="queryInfo.query"></el-input>-->
<!--                      <el-button type="primary" size="mini" @click="getUsers()"><el-icon><Search /></el-icon></el-button>-->
<!--                    </div>-->
<!--                </el-col>-->
                <el-col :span="4">
                    <el-button type="primary" @click="addrights = true">添加权限</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="rightsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="权限名称" prop="menus"></el-table-column>
                <el-table-column label="父菜单" prop="menusid"></el-table-column>
                <el-table-column label="权限等级" prop="grade"></el-table-column>
                <el-table-column label="操作" width="185px">
                    <template #default="scope">
                          <el-button type="primary"  size="mini" @click="showEditDialog(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
                          <el-button type="danger"  size="mini" @click="removeRightsById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <!-- 分页区域 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
          <el-dialog title="修改菜单" v-model="editDialogVisible" width="20%" @close="editDialogClosed"
          :close-on-click-modal='false'>
            <!-- 内容主体区 -->
            <el-form :model="editrightsForm" :rules="editrightsForm" ref="editrightsFormRef" label-width="70px">
              <el-form-item label="ID" prop="ID">
                <el-input v-model="editrightsForm.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="菜单名称" prop="menus">
                <el-input v-model="editrightsForm.menus"></el-input>
              </el-form-item>
              <el-form-item label="父菜单" prop="menusid">
                <el-input v-model="editrightsForm.menusid"></el-input>
              </el-form-item>
              <el-form-item label="级别" prop="grade">
                <el-input v-model="editrightsForm.grade"></el-input>
              </el-form-item>
            </el-form>
            <!-- 底部区 -->
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="editright()">确 定</el-button>
                </span>
              </template>
          </el-dialog>
          <!-- 添加权限的对话框 -->
            <el-dialog title="添加用户" v-model="addrights" width="20%" @close="addrightsClosed">
            <!-- 内容主体区 -->
            <el-form :model="addrightsForm" ref="addrightsFormRef" label-width="70px">
              <el-form-item label="ID" prop="username"> <!-- prop是验证规则属性 -->
                <el-input v-model="addrightsForm.id" placeholder="ID避免重复"></el-input>
              </el-form-item>
              <el-form-item label="菜单名" prop="password">
                <el-input v-model="addrightsForm.menus"></el-input>
              </el-form-item>
              <el-form-item label="父ID" prop="email">
                <el-input v-model="addrightsForm.menusid" placeholder="上级菜单的ID"></el-input>
              </el-form-item>
              <el-form-item label="权限级别" prop="email">
                <el-input v-model="addrightsForm.grade" placeholder="几级菜单，例如一级，二级"></el-input>
              </el-form-item>
            </el-form>
            <!-- 底部区 -->
          <template #footer>
              <span class="dialog-footer">
              <el-button @click="addrights = false" @click.prevent="addrightsForm = {}">取 消</el-button>
              <el-button type="primary" @click="addright()">确 定</el-button>
            </span>
          </template>
          </el-dialog>
        </el-card>
    </div>
</template>

<script>
import { Delete, Edit } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
// import { Search } from '@element-plus/icons-vue'
export default {
    data(){
        return {
            editrightsForm:{},
            //权限列表
            editDialogVisible: false,
            rightsList: [],
            loading: false,
            queryInfo: {
              query: "",
              pagenum: 1, //当前的页数
              pagesize: 13, //每页的数量
            },
            total: 0,
            addrights: false, //控制添加权限对话框的显示与隐藏
            //添加权限的表单数据
            addrightsForm: {},

        }
    },
    components: {
      Edit,
      Delete
    // Search,
  },
    created(){
        //获取所有的权限信息
        this.getRightsList();
    },
    methods:{
            // 点击按钮，添加新权限
        async addright() {
          await this.$http
              .post("/addrights/", this.addrightsForm)
              .then((response) => {
                console.log(response)
                this.addrightsForm = {}
                this.addrights = false;
                this.getRightsList()
                this.$message.success('添加权限成功！');
              }).catch(error => {
                console.error(error);
                this.addrights = false;
                this.$message.error('添加权限失败！');
              });
        },
          //监听添加用户对话框的关闭状态
        addrightsClosed(){
          this.$refs.addrightsFormRef.resetFields();
        },
          // 关闭编辑用户的对话框
        editDialogClosed() {
          this.$refs.editrightsFormRef.resetFields()
        },
          //监听 pagesize 改变的事件
        handleSizeChange(newSize){
            // console.log(newSize);
            this.queryInfo.pagesize = newSize;//重新指定每页数据量
            this.queryInfo.pagenum = 1;
            this.getRightsList();//带着新的分页请求获取数据
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage){
            // console.log(newPage);
            this.queryInfo.pagenum = newPage;//重新指定当前页
            this.getRightsList();//带着新的分页请求获取数据
        },
        //获取权限列表
        async getRightsList() {
          this.loading = true
          await this.$http.post('/getRightsList/', this.queryInfo)
              .then((response) => {
                this.rightsList = response.data.results;
                this.total = response.data.total
                // this.$message({type: 'success', message: '获取权限列表成功!'});
                this.loading = false
              }).catch(error => {
                console.error(error)
                // this.$message({type: 'error',message: '获取权限列表失败！'});
                this.getRightsList()
              })
        },
        async removeRightsById(id) {
          // 弹框询问用户是否删除数据
          ElMessageBox.confirm('此操作将永久删除菜单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const data = { 'id': id }
            try {
              const response = await this.$http.post('/delrights/', data)
              console.log(response)
              this.getRightsList()
              ElMessage.success('删除成功!');
            } catch (error) {
              console.error(error)
              ElMessage.error('删除失败！');
            }
          }).catch(() => {
            ElMessage.info('已取消删除');
          })
        },
    async showEditDialog(id) {
      try {
        const response = await this.$http.post('/showeditrights/', {'id': id})
        this.editrightsForm = response.data;
        this.editDialogVisible = true;
        ElMessage.success('打开成功！');
      } catch (error) {
        console.error(error);
        ElMessage.error('打开失败！');
      }
    },
    async editright() {
      try {
        const response = await this.$http.post('/editright/', this.editrightsForm)
        console.log(response)
        this.editrightsForm = {}
        this.editDialogVisible = false;
        this.getRightsList()
        ElMessage.success('修改成功！');
      } catch (error) {
        console.error(error);
        ElMessage.error('修改失败！');
      }
    },
    }
}
</script>

<style scoped>

</style>